<template>
    <div class="plantFormBox" style="margin-top: 0;">
        <div class="formItem">
            <h5>选择种植地块：</h5>
            <div class="mytips">提示：需要考虑土壤质量、地理位置、 水源和灌溉、坡度和排水、阳光照射、地块大小和形状、土地历史和疾病、市场需求、设施和基础设施、可持续性考虑。</div>
            <div class="inputItem">
                <div class="lable"><span>*</span>选择种植地块：</div>
                <div v-if="farmLists" style="flex: 1;">
                    <farm-select ref="farmRef" v-model="farmId" className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" :optLists='farmLists' width="100%" @change="get_land_list"/>
                </div>
                <div style="margin-right: 10px;margin-left: 10px;flex: 1;">
                    <land-select ref="farmRef" v-model="lineLandIdList" className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" :optLists='landLists' width="100%" @change="getlandInfo"/>
                </div>
                <el-button type="success" plain @click="add">添加</el-button>
            </div>
            <table class="itemTableBox" style="width:100%;min-width:100%;margin-top: 10px;">
                <tr>
                    <th width="80">序号</th>
                    <th>地块名称</th>
                    <th>地块面积(亩)</th>
                    <th>地块质地</th>
                    <th>地块分组</th>
                    <th>位置</th>
                    <th>备注</th>
                    <th width="80">操作</th>
                </tr>
                <tr v-for="(dt,index) in tableData" :key="dt.farmLandId">
                    <td>{{index + 1}}</td>
                    <td>{{dt.farmLandName}}</td>
                    <td>{{dt.areaSize}}</td>
                    <td>{{dt.geologyName}}</td>
                    <td>{{dt.groupName}}</td>
                    <td>{{ dt.locationAddress }}</td>
                    <td>{{ dt.landRemark }}</td>
                    <td>
                        <div class="tbItemFlex">
                            <el-icon color="#f82e2e" :size="20" @click="delLandSelect(index)"><Remove /></el-icon>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="padding:10px" v-if="tableData.length">共计{{tableData.length}}块地，{{ tableData[0].areaSize }}亩</div>
        </div>
        <div class="dktcxzbtn">
            <el-button size="small" @click="close">取 消</el-button>
            <el-button size="small" type="primary" @click="comfirmSelectData">确 定</el-button>
        </div>
    </div>
</template>
<script setup>
import {ref,onMounted} from "vue"
import landGroupSelect from '@/components/custom/landGroupSelect.vue'
import farmSelect from '@/components/custom/farmSelect.vue'
import landSelect from '@/components/custom/landSelect.vue'
import {getFarmList,getLandList} from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'
import { message } from '@/utils/element'

const userStore = useUserStore()

const props = defineProps({
    options:{
        type:Object,
        default:{stagesItem:'',lineListItem:''}
    }
})

let landLists = ref([])
let landSelectData = ref([])
let tmLists = []
const lgsRef = ref(null)
const farmLists = ref('')
const farmId = ref('') // 农场id
const lineLandIdList = ref('') // 地块ID
const selectlanditem = ref([]) //选择的地块信息
const tableData = ref('')

const emit = defineEmits(['close'])

onMounted(()=>{
    get_farm_list()
    //编辑
    if(props.options.lineListItem && props.options.lineListItem.landDetailLists){
        tableData.value = props.options.lineListItem.landDetailLists
    }
})

const get_farm_list = async ()=>{
    const res = await getFarmList({
        page:1,
        limit:1000000,
        isEnable:true,
        companyId:userStore.userInfo.roleId==1?null:userStore.userInfo.companyId
    })
    farmLists.value = res.data || []
}

const get_land_list = async ()=>{
    const res = await getLandList({
        page:1,
        limit:1000000,
        farmId:farmId.value
    })
    landLists.value = res.data
}
const getlandInfo = (item)=>{
   // console.log("OOO:",item)
    selectlanditem.value=item
}

// 确认添加地块
const add = ()=>{
    if(!lineLandIdList.value){
        return message('请选择地块',3) 
    }else if(tableData.value.length>0){
        return message('一个农事事项只能添加一个农场的地块',3) 
    }
    tableData.value = [...tableData.value,selectlanditem.value]
    // 清空下拉
    lineLandIdList.value = ''
    selectlanditem.value=''
}
const comfirmSelectData = ()=>{
    if(tableData.value.length<1){
        return message('请添加地块',3) 
    }
    
    // tableData.value.forEach(item =>{
    //     props.options.lineListItem.lineLandIdList.push(item.farmLandId)
    // })
    props.options.lineListItem.farmId = tableData.value[0].farmId
    props.options.lineListItem.farmLandName = tableData.value[0].farmLandName
    props.options.lineListItem.lineLandIdList = [tableData.value[0].farmLandId]
    close()
}
// 删除选择的地块
const delLandSelect = (index)=>{
    tableData.value.splice(index,1)
}
const close=()=>{
    emit('close') 
}

// const getSelectData = async (lists)=>{
//     console.log("&&&&&:",lists)
//     tmLists = JSON.parse(JSON.stringify(lists))
//   }
</script>
<style lang="scss" scoped>
.dktcxzbtn{
    display: flex;
    padding: 20px 0 0 0;
    justify-content: end;
}
</style>